@import './mixins';
@import './atomic';

/**
 * ==========================
 * common style
 * ==========================
 */

.black {
  color: $black;
}
.gray {
  color: $gray;
}
.light-gray {
  color: $lightGray;
}
.blue,
.color-info {
  color: $blue;
}
.orange,
.text-warning,
.color-warning {
  color: $orange;
}
.orange2 {
  color: $orange2;
}
.green,
.text-success,
.color-success {
  color: $green;
}
.green2 {
  color: $green2;
}

.red,
.text-danger,
.color-error {
  color: $red;
}
.text-primary {
  color: $primary;
}
.pink-deep {
  color: $pink_deep;
}

/* ========== btn ========== */
.btn {
  &.default-btn {
    background: #1f2430;
    border: 2px solid #434855;
    color: #fff;
  }

  &.btn-primary {
    background-color: $primary;
    color: #fff;
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: darken($primary, 20%);
    }
  }

  &.btn-green {
    background: $primary;
    color: #fff;
    border-radius: 24rpx;

    &.btn-small {
      background: $primary;
      border-radius: 66rpx;
    }

    &:hover,
    &:focus,
    &:active,
    &.active {
      background: $primary;
    }

    &[disabled],
    &:disabled,
    &.disabled {
      background: #353c49;
      color: #aeb5c7;
      cursor: not-allowed;
    }
  }

  &.btn-yellow {
    background: $primary;
    color: $wordGray;
    border-radius: 24rpx;

    &.btn-small {
      background: $primary;
      border-radius: 66rpx;
    }

    &:hover,
    &:focus,
    &:active,
    &.active {
      background: $primary;
    }

    &[disabled],
    &:disabled,
    &.disabled {
      background: #fff;
      color: #aeb5c7;
      cursor: not-allowed;
    }
  }
}

.btn-main {
  width: 664px;
  height: 88px;
  background: linear-gradient(0deg, #ff8c1b, #ff216f);
  box-shadow: 3px 10px 14px 0px rgba(55, 56, 57, 0.06);
  border-radius: 12px;
  font-size: 36px;
  color: #fff;
  &:focus {
    box-shadow: 3px 10px 14px 0px rgba(55, 56, 57, 0.06);
  }
}

/* ========== 图片 ========== */
.img {
  &.active {
    border: 2rpx solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, $bgBlack, $bgBlack),
      linear-gradient(110deg, $mainPink 0%, $lightBlue 100%);
  }
}

.main-img-border {
  border: 2rpx solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #fff, #fff),
    linear-gradient(110deg, $mainPink 0%, $lightBlue 100%);
}

/* ========== a ========== */
.a-red {
  color: $primary;
  &:hover,
  &.focus,
  &.active {
    color: darken($primary, 20%);
  }
}

/* ========== 图片容器 ========== */
.image-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  &.fill-width {
    flex-direction: column;
    & > img {
      width: 100%;
    }
  }

  &.fill-height {
    flex-direction: row;
    & > img {
      height: 100%;
    }
  }

  &.justify-end {
    justify-content: flex-end;
  }
}

/* ========== 消除浮动 float ========== */
.cf:before,
.cf:after {
  content: '';
  display: table;
}
.cf {
  zoom: 1;
}
.cf:after {
  clear: both;
}

/* ========== font ========== */
.fs-0 {
  font-size: 0;
}
.strong {
  font-weight: bold;
}

/* ========== panel ========== */
.panel-container {
  background-color: #fff;
  border-radius: 12px;
  &.panel-body,
  &.panel-header {
    padding: 28px;
  }

  &.panel-header {
    border-bottom: 1px solid $gray_d9;
  }

  &.panel-header-border {
    padding-left: 16px;
    font-weight: bold;
    border-left: 4px solid $primary;
  }
}

/* ========== layout ========== */
page,
body {
  color: $wordGray;
}

.uni-table {
  background-color: transparent !important;
}
.uni-table-th,
.uni-table-td {
  background-color: transparent;
  color: $wordGray !important;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.2) !important;
}
.uni-table-loading .uni-table-text {
  background-color: transparent;
  color: #fff !important;
}

/* ========== card ========== */
.card {
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.card-black {
  background-color: $black_card;
  color: #fff;
  .uni-card {
    background-color: $black_card;
    .uni-card__content {
      color: #fff;
    }
    &.uni-card--border {
      border: none;
    }
  }
}

.card-yellow {
  background-color: #f7da7a;
  color: #fff;
  .uni-card {
    background-color: #f7da7a;
    .uni-card__content {
      color: #fff;
    }
    &.uni-card--border {
      border: none;
    }
  }
}

/* 选中图标 */
.checked-img {
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  width: 48rpx;
  height: 44rpx;
}

.grade-list-block {
  .uni-card {
    .uni-card__content {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
  }
}
.member-ship {
  .uni-card {
    border-radius: 24rpx;
    background-color: #2b3242;
    padding: 28rpx 40rpx !important;
    .uni-card__content {
      padding: 0 !important;
    }
  }
}

.card-gray .uni-card {
  border-width: 0;
  background-color: #1f2430;

  .uni-card__content {
    color: #fff;
  }
}

.zp-l-container .zp-l-text {
  color: $wordGray !important;
}
/* src\pages\create\tab-body-materails.vue */
.tab-body-materails {
  .uni-list {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .uni-list-item__container {
    padding: 0 !important;
  }
}
